<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>VueComponent</title>
    <script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!--
        关于VueComponent：
            1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
            2.我们只需要写 <school/> 或 <school></school>，Vue 解析时会帮我们创建 school 组件的实例对象，即 Vue 帮我们执行的：new VueComponent(options)。
            3.特别注意：每次调用 Vue.extend，返回的都是一个全新的 VueComponent！！！！
            4.关于 this 指向：
                (1).组件配置中：
                    data 函数、methods 中的函数、watch 中的函数、computed 中的函数 它们的 this 均是【VueComponent 实例对象】。
                (2).new Vue(options) 配置中：
                    data 函数、methods 中的函数、watch 中的函数、computed 中的函数 它们的 this 均是【Vue 实例对象】。
            5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
              Vue的实例对象，以后简称vm。
    -->
<!-- 准备好一个容器-->
<div id="root">
    <school></school>
    <hello></hello>
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false;

    //定义school组件
    const school = Vue.extend({
        name:'school',
        template:`
				<div>
					<h2>学校名称：{{name}}</h2>
					<h2>学校地址：{{address}}</h2>
					<button @click="showName">点我提示学校名</button>
				</div>
			`,
        data(){
            return {
                name:'尚硅谷',
                address:'北京'
            }
        },
        methods: {
            showName(){
                console.log('showName',this)
            }
        },
    });

    const test = Vue.extend({
        template:`<span>atguigu</span>`
    });

    //定义hello组件
    const hello = Vue.extend({
        template:`
				<div>
					<h2>{{msg}}</h2>
					<test></test>
				</div>
			`,
        data(){
            return {
                msg:'你好啊！'
            }
        },
        components:{test}
    });


    console.log('@',school);
    console.log('#',hello);

    //创建vm
    const vm = new Vue({
        el:'#root',
        components:{school,hello}
    })
</script>
</html>